<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./city.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script>
		
		
		console.log(data);

		$(function () {

			for( var i in data){
				$('#pro').append('<option value="'+data[i].code+'">'+data[i].name+'</option>')
			}

			$('#pro').change(function(event) {
				var code = $(this).val();

				$('#city').html('<option value="0">请选择</option>');

				for( var i in data){

				 	if(data[i].code==code){
				 		cityData = data[i].children;
				 	}

				}

				console.log(cityData);

				for( var i in cityData){
					$('#city').append('<option value="'+cityData[i].code+'">'+cityData[i].name+'</option>')
				}

			});

			$('#city').change(function(event) {
				var code = $(this).val();

				$('#area').html('<option value="0">请选择</option>');

				for( var i in cityData){

				 	if(cityData[i].code==code){
				 		areaData = cityData[i].children;
				 	}

				}
				console.log(areaData);

				for( var i in areaData){
					$('#area').append('<option value="'+areaData[i].code+'">'+areaData[i].name+'</option>')
				}

			});
			
		})
	</script>
</head>
<body>
	<select name="pro" id="pro">
		<option value="0">请选择</option>
	</select>
	<select name="city" id="city">
		<option value="0">请选择</option>
	</select>
	<select name="area" id="area">
		<option value="0">请选择</option>
	</select>
</body>
</html>